
<!-- N个status api行-->
<script id="all-status-apis-tpl" type="text/template">
    <ul class="list" id="status-apis">
        {@each statusAPIs as c}
            <li id="status-api-li-${c.id}"  class="status-api-li" data-id="${c.id}" data-name="${c.name}" >
                <div class="status-api-name">
                    <a data-id="${c.id}" href="javascript:void(0);" class="status-api-a">${c.name}</a>
                </div>

                <div class="status-api-ops">
                    <!--<button type="button" data-id="${c.id}" class="btn btn-default btn-xs editStatusAPI">-->
                        <!--<span class="glyphicon glyphicon-pencil" aria-hidden="true" aria-label="edit"></span>-->
                    <!--</button>-->
                    <button type="button" data-id="${c.id}" data-name="${c.name}" class="btn btn-default btn-xs deleteStatusAPI">
                        <span class="glyphicon glyphicon-remove-sign" aria-hidden="true" aria-label="delete"></span>
                    </button>
                </div>
            </li>
        {@/each}
    </ul>
</script>

<!-- 一个status api行-->
<script id="single-status-api-tpl" type="text/template">
    <li id="status-api-li-${id}"  class="status-api-li" data-id="${id}" data-name="${name}" >
        <div class="status-api-name">
            <a data-id="${id}" href="javascript:void(0);" class="status-api-a">${name}</a>
        </div>

        <div class="status-api-ops">
            <!--<button type="button" data-id="${id}" class="btn btn-default btn-xs editStatusAPI">-->
                <!--<span class="glyphicon glyphicon-pencil" aria-hidden="true" aria-label="edit"></span>-->
            <!--</button>-->
            <button type="button" data-id="${id}" data-name="${name}" class="btn btn-default btn-xs deleteStatusAPI">
                <span class="glyphicon glyphicon-remove-sign" aria-hidden="true" aria-label="delete"></span>
            </button>
        </div>
    </li>
</script>


<!--新建一个status api-->
<script id="create-status-api-tpl" type="text/template">
    <form class="form-horizontal">
        <div class="form-group">
            <label for="to_select_har" class="col-sm-2 control-label">Hars</label>
            <div class="col-sm-10">
                <select name="har" id="to_select_har" class="form-control">
                    {@each hars as h}
                    <option value="${h.harId}">${h.name}</option>
                    {@/each}
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="status_api_name" class="col-sm-2 control-label">Name</label>
            <div class="col-sm-10">
                <input type="text" id="status_api_name" value="status_api_name" class="form-control">
            </div>
        </div>

        <div class="form-group">
            <label for="status_api_cron" class="col-sm-2 control-label">Cron</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="status_api_cron" value="5" placeholder="the seconds before next calling">
            </div>
        </div>

        <div class="form-group">
            <label for="status_api_monitor" class="col-sm-2 control-label">Monitor</label>
            <div class="col-sm-10">
                <select name="status_api_monitor" id="status_api_monitor" class="form-control">
                    <option value="0" selected>Stop</option>
                    <option value="1">Start</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <span id="create-status-api-tip"></span>
                </div>
            </div>
        </div>
    </form>
</script>


<script id="status-api-tpl" type="text/template">
    <form class="form-inline">

        <div class="form-group" style="display:none;">
            <label for="edit_status_api_id" class="col-sm-2 control-label">Name</label>
            <input type="text" id="edit_status_api_id" value="${api.id}" class="form-control">
        </div>



        <div class="form-group">
            <label for="edit_status_api_name">Name</label>
            <input type="text" id="edit_status_api_name" value="${api.name}" class="form-control">
        </div>

        <div class="form-group" style="margin-left:10px;">
            <label for="edit_status_api_cron">Cron</label>
            <input type="text" class="form-control" id="edit_status_api_cron" value="${api.cron}" placeholder="the seconds before next calling">
        </div>

        <div class="form-group" style="margin-left:10px;">
            <label for="edit_status_api_monitor">Monitor</label>
                <select name="edit_status_api_monitor" id="edit_status_api_monitor" class="form-control">
                    <option value="0" {@if api.monitor==false } selected {@/if}>Stop</option>
                    <option value="1" {@if api.monitor==true } selected {@/if}>Start</option>
                </select>
        </div>

        <div class="form-group" style="margin-left:10px;">
            <a id="showHarBtn" class="btn btn-success" href="javascript:void(0)">Show Har</a>
            <a id="saveStatusAPIBtn" class="btn btn-primary" href="javascript:void(0)">Modify</a>
        </div>

        <div id="previewHar" class="form-group" style="display:none;">
            <label for=""></label>
            <p><pre style="height:200px;"><code>${har}</code></pre></p>
        </div>




        <div class="form-group" style="margin-top:20px;margin-bottom:10px;">
            <label class=""></label>
            <div style="text-align:right;">

                <a id="logsStatusAPIBtn" data-toggle="tooltip" title="show recent request logs" class="btn btn-info" href="javascript:void(0)">Show Logs</a>
                <a id="deleteStatusAPILogsBtn" class="btn btn-danger" href="javascript:void(0)">Delete Logs</a>
            </div>

        </div>

    </form>
</script>


<script id="log-body-tpl" type="text/template">
    {@each logs as l,index}
        {@if index==0}
            <tr class="odd gradeX">
        {@else}
            <tr class="even gradeC">
        {@/if}

                {@if l.statusCode>=200 && l.statusCode<400}
                    <td style="text-align:center;font-weight: 700;color:#18A554;">${l.statusCode}</td>
                {@else if l.statusCode>=400 && l.statusCode < 500}
                    <td style="text-align:center;font-weight: 700;color: #F83;">${l.statusCode}</td>
                {@else if l.statusCode>=500}
                    <td style="text-align:center;font-weight: 700;color:#CF6565;">${l.statusCode}</td>
                {@else}
                    <td style="text-align:center;font-weight: 700;">${l.statusCode}</td>
                {@/if}

                <td style="text-align:center;">${l.spent/1000000}ms</td>
                <td style="text-align:center;">${l.date|momentFormat}</td>
                <td style="text-align:center;" class="api_response" title="${l.response}">${l.response}</td>

            </tr>
    {@/each}
</script>